<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <script type="text/javascript" src="../../../static/jquery/1.9.0/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../../../static/jquery/1.9.0/jquery-ui-1.9.0.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../../static/jquery/1.9.0/jquery-ui-1.9.0.custom.min.css">
  <script>
    $(function() {
        $( document ).tooltip();
        
        $( "#show-option" ).tooltip({
            show: {
                effect: "slideDown",
                delay: 250
            }
        });
        $( "#hide-option" ).tooltip({
            hide: {
                effect: "explode",
                delay: 250
            }
        });
        $( "#open-event" ).tooltip({
            show: null,
            position: {
                my: "left top",
                at: "left bottom"
            },
            open: function( event, ui ) {
                ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
            }
        });
    });
    </script>
    <style>
    label {
        display: inline-block;
        width: 5em;
    }
    </style>
</head>
<body>
	<input id="tooltip1" title="hello world">
 	<p>There are various ways to customize the animation of a tooltip.</p>
	<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and
	<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p>
	<p>You can also use the <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="move down on show">open event</a>.</p>
	 
 
</body>
</html>